<template>
  <view class="container" style="background-image: url(../../static/login/register.jpg); background-position: center center;  background-repeat: no-repeat;">
    <view class="register-form">
      <view class="title">注册</view>
      <form @submit.prevent="register">
        <view class="form-item">
          <input type="text" v-model="username" placeholder="用户名" required />
        </view>
        <view class="form-item">
          <input type="tel" v-model="phone" placeholder="电话" required />
          <view v-show="!validatePhone(phone)" class="error-message">手机号格式不正确</view>
        </view>
        <view class="form-item">
          <input type="password" v-model="password" placeholder="密码（6-15位，包含字母和数字）" required />
          <view v-show="!validatePassword(password)" class="error-message">密码格式不正确</view>
        </view>
        <view class="form-item">
          <input type="password" v-model="confirmPassword" placeholder="再次确认密码" required />
          <view v-show="password !== confirmPassword" class="error-message">密码和确认密码不一致</view>
        </view>
        <view class="form-item">
          <input type="text" v-model="address" placeholder="地址" required />
        </view>
        <button type="submit">注册</button>
      </form>
    </view>
  </view>
</template>

<script>
  import config from '@/config/config.js'; // 引入全局配置文件

export default {
  data() {
    return {
      username: '',
      phone: '',
      password: '',
      confirmPassword: '',
      address: ''
    };
  },
  methods: {
    // 校验手机号格式
    validatePhone(phone) {
      const reg = /^[1][3,4,5,7,8][0-9]{9}$/;
      return reg.test(phone);
    },
    // 校验密码格式
    validatePassword(password) {
      const reg = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,15}$/;
      return reg.test(password);
    },
    register() {
      // 处理注册逻辑
      if (this.password !== this.confirmPassword) {
        // 密码和确认密码不一致，显示错误提示
        return;
      }
      if (!this.validatePhone(this.phone)) {
        // 手机号格式不正确，显示错误提示
        return;
      }
      if (!this.validatePassword(this.password)) {
        // 密码格式不正确，显示错误提示
        return;
      }
      if (this.username === '' || this.phone === '' || this.password === '') {
        return;
      }
      
      let user = {
        username: this.username,
        phone: this.phone,
        password: this.password,
        address: this.address
      };

      // 在发送请求时拼接 baseURL
      uni.request({
        url: config.baseURL + '/users/register',
        method: 'POST',
        data: user,
        success: (res) => {
          if (res.data.status == true) {
            uni.showToast({
              title: '注册成功',
              icon: 'success',
              duration: 2000,
              success: () => {
                uni.navigateTo({
                  url: '/pages/login/login' // 登录页面的路径
                });
              }
            });
          } else {
            console.error('注册失败', res.data.message);
          }
        },
        fail: (err) => {
          console.error('请求失败', err);
        }
      });
    }
  }
};
</script>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
}

.register-form {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.title {
  text-align: center;
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: bold;
}

.form-item {
  margin-bottom: 20px;
  position: relative;
}

input {
  width: 89%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.error-message {
  color: red;
  position: absolute;
  top: 100%;
}

button {
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #0056b3;
}
</style>
